<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb
      separator="/"
      class="page-title"
    >
      <el-breadcrumb-item :to="{ path: '/categoryTranslationIndex' }">Category translation</el-breadcrumb-item>
      <el-breadcrumb-item>New&Edit</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding" v-loading.fullscreen.lock="fullscreenLoading">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="form" size="mini" ref="form" :rules="rules"
                 class="demo-ruleForm main-search-box">
          <el-row>
            <!--Status-->
            <el-form-item label="Status" style="width: 200px;margin-right: 10px">
              <el-select style="width: 200px" v-model="form.status" placeholder="">
                <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <!--第一级菜单-->
            <el-form-item label="Category1" style="width: 200px;margin-right: 10px" prop="firstCategory">
              <el-select style="width: 200px" v-model="form.firstCategory" @change="getSecondaryData">
                <el-option v-for="i in categoryData" :key="i.id" :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
            <!--第二级菜单-->
            <el-form-item label="Category2" style="width: 200px;margin-right: 10px" prop="secondaryCategory" v-if="showSecond">
              <el-select style="width: 200px" v-model="form.secondaryCategory" @change="getThirdData"
              >
                <el-option v-for="i in secondaryData" :key="i.id" :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <!--english-->
            <el-row>
              <el-col class="name-require">
                <el-form-item
                  label="English"
                  style="width: 200px"
                  prop="categoryName"
                >
                  <el-input
                    v-model="form.categoryName"
                    class="name-label"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <el-row>
            <!--zawgyi-->
            <el-row>
              <el-col>
                <el-form-item
                  label="Zawgyi"
                  style="width: 200px"
                >
                  <el-input
                    v-model="form.zawgyi"
                    class="name-label"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
          <!--search-->
          <el-button @click="$router.go(-1)" type="info" style="width:80px">Cancel</el-button>
          <!--new-->
          <el-button @click="onSubmit" type="success" style="width:80px">Save</el-button>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>

  import {getCategoryTransition, categoryTransitionNew, categoryTransitionEdit} from '../../api/guc_api.js'
  import categoryData from '@/json/category.json';

  import Qs from 'qs';

  export default {
    name: 'CategoryTranslationNew',
    data() {
      return {
        form: {
          categoryId: '',
          category1_id: '',
          category2_id: '',
          status: '1',
          categoryName: '',
          zawgyi: '',
          firstCategory: '',
          secondaryCategory: '',
        },
        statusOption: [
          {
            label: 'Active',
            value: '1'
          },
          {
            label: 'Deleted',
            value: '0'
          }
        ],
        showSecond:false,
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        tableData: [],
        // 当前行
        currentRow: null,
        //本地数据
        categoryData,
        secondaryData: [],
        fullscreenLoading: false,
        rules: {
          categoryName:[
            {
              validator: (rule, value, callback) => {
                if (value === "") {
                  callback(new Error("can not be empty"));
                }
                else {
                  callback();
                }
              },
              trigger: "blur"
            }
          ]
        },
      }
    },
    methods: {
      // 获取二级菜单
      getSecondaryData() {
        this.showSecond=true
        this.form.secondaryCategory = ''
        let index
        index = this.categoryData.findIndex((item) => {
          return item.name === this.form.firstCategory
        })
        this.secondaryData = this.categoryData[index].children
        if (this.form.firstCategory) {
          this.categoryData.forEach((item) => {
            if (item.name === this.form.firstCategory) {
              this.form.category1_id = item.id
              //重置二级数据
              this.form.category2_id = ''
              this.form.secondaryCategory = ''
            }
          })
        }
      },
      // 获取三级菜单
      getThirdData() {
        let index
        index = this.secondaryData.findIndex((item) => {
          return item.name === this.form.secondaryCategory
        })
        if (this.form.secondaryCategory) {
          this.secondaryData.forEach((item) => {
            if (item.name === this.form.secondaryCategory) {
              this.form.category2_id = item.id
            }
          })
        }
      },



      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //提交成功显示的消息
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: "success"
        });
      },
      //提交表单
      onSubmit() {
        if(!this.form.categoryName){
          this.messageToastErr('Please fill required area')
        }
        else{
          let params = {
            categoryId: this.form.categoryId,
            status: this.form.status,
            categoryName:this.$translateLang(this.form.categoryName||'','zawgyiTounicode')||'',
            zawgyi:this.$translateLang(this.form.zawgyi||'','zawgyiTounicode')||'',
            category1_id: this.form.category1_id,
            category2_id: this.form.category2_id
          }
          params = Qs.stringify(params);
          let config = {
            "Content-Type": "multipart/form-data"
          };
          this.fullscreenLoading = true;

          //编辑
          if (this.$route.query.id) {
            categoryTransitionEdit(params, config)
              .then(res => {
                this.fullscreenLoading = false;
                if (res.data.errorID == 0) {
                  this.messageToastSuccess('Edit success!')
                  this.$router.push('/categoryTranslationIndex')
                }
                else {
                  this.messageToastErr(res.data.message)
                }
              })
              .catch(err => {
                this.fullscreenLoading = false;
                console.log(err)
              })
          }
          // 新增
          else {
            categoryTransitionNew(params, config)
              .then(res => {
                this.fullscreenLoading = false;
                if (res.data.errorID == 0) {
                  this.messageToastSuccess('New create success!')
                  this.$router.push('/categoryTranslationIndex')
                }
                else {
                  this.messageToastErr(res.data.message)
                }
              })
              .catch(err => {
                this.fullscreenLoading = false;
                console.log(err)
              })
          }
        }

      },
      //初始化
      initForm() {
        this.fullscreenLoading = true
        getCategoryTransition({categoryId: this.form.categoryId})
          .then(res => {
            this.fullscreenLoading = false
            if (res.data.errorID == 0) {
              let data = res.data.object.list[0]
              this.form.status=data.status+''
              this.form.categoryName = this.$translateLang(data.categoryName||'','unicodeTozawgyi')||''
              this.form.zawgyi = this.$translateLang(data.zawgyi||'','unicodeTozawgyi')||'';
              if (data.category1_name) {
                this.form.firstCategory = data.category1_name
                this.form.category1_id = data.category1_id
                if (data.category2_name) {
                  this.showSecond=true
                  this.form.secondaryCategory = data.category2_name
                  this.form.category2_id = data.category2_id
                  let index
                  index = this.categoryData.findIndex((item) => {
                    return item.name === this.form.firstCategory
                  })
                  this.secondaryData = this.categoryData[index].children
                }
              }
            }
            else {
              this.messageToastErr(res.data.message)
            }
          })
          .catch(err => {
            this.fullscreenLoading = false
            console.dir(err)
          })
      },

    },
    mounted() {
      window.scroll(0, 0)
      if (this.$route.query.id) {
        this.form.categoryId = this.$route.query.id
        this.initForm()
      }
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }

  .name-require::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
    position: relative;
    top: 5px;
  }

  .name-label {
    margin-left: -8px;
  }
</style>
